<template>
    <div class="grid-content">
        <p class="mt15"></p>
        <el-row>
            <el-col>
                <div class="search">
                    <el-form :model="queryParams" ref="queryRef" label-width="100px" label-position="left" :inline="true">
                        <el-form-item label="考评指标名称" prop="name">
                            <el-input v-model.trim="queryParams.name" placeholder="请输入考评指标名称" clearable
                                style="width: 240px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="handleQuery">查询</el-button>
                            <el-button type="primary" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <div class="wrapBox" style="width: 100%;">
                <el-table v-loading="loading" :data="dataList" stripe row-key="id" ref="multipleTable" @selection-change="handleSelectionChange" @select="selectChange" :header-cell-class-name="headerCellStyle">
                    <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
                    <el-table-column label="指标名称" align="center" prop="name" />
                    <el-table-column label="评分内容" align="center" prop="remark" />
                    <el-table-column label="系统评分" align="center" prop="isSystem">
                        <template #default="scope">
                            <span v-if="scope.row.isSystem=='0'">否</span>
                            <span v-else>是</span>
                            <span></span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="text" @click="handleDetil(scope.row)">查看</el-button>
                            <el-button type="text" @click="handleUpdate(scope.row)">修改</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
        </el-row>
        <el-row>
            <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
                v-model:limit="queryParams.rows" @pagination="getList" />
        </el-row>
    </div>
</template>

<script setup>
import {getThreeLevelIndexList} from '@/api/workEvaluation/evaluationStandardSetup/threeLevelIndexLibraryManage.js';
import { nextTick, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['getSelection'])
const props = defineProps({
    tableChooseVal:{
        type:Object,
    }
})
const { tableChooseVal } = toRefs(props);
const dataList = ref([]);
const total = ref(0);
const loading = ref(false);
const queryParams = ref({
    rows:10,
    page:1,
    name:undefined,
})

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 单选
const selectChange = (selection)=>{
    if (selection.length > 1) {
        const del_row = selection.shift();
        proxy.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
}

// 多选框选中数据
function handleSelectionChange(selection) {
    console.log(selection)
    emits('getSelection',selection)
}

const  headerCellStyle=({ column, columnIndex }) =>{
      if (columnIndex === 0) {
        return 'hiddenCheck'
      }
    }


const getList =()=> {
    loading.value = true;
    getThreeLevelIndexList(queryParams.value).then(response => {
        dataList.value = response.data.list?response.data.list:[];
        total.value = response.data.total;
        loading.value = false;
        dataList.value.forEach((v,i)=>{
           if(v.id==tableChooseVal.value.name3Id){
            nextTick(()=>{
                proxy.$refs['multipleTable'].toggleRowSelection(v,true)
            })
           }
        })
    }).catch(err=>{
        loading.value = false;
        dataList.value = [];
        total.value = 0;
    });
}

getList();
onMounted(()=>{
    console.log(tableChooseVal.value)
})
</script>
<style>
.el-table__header-wrapper  .el-checkbox{
    /* //找到表头那一行，然后把里面的复选框隐藏掉 */
	display:none
}

</style>

<style scoped lang="scss">
.hiddenCheck {
  visibility: hidden;
// display: none;
}
</style>